<template>
  <div class="nav tw-flex">
    <a class="nav__logo tw-w-24 tw-p-2" href="/">
      <img class="tw-w-full tw-h-full tw-object-contain" src="@/assets/logo.png">
    </a>
    <a class="nav__logo tw-h-full tw-w-40 tw-px-2 sm:tw-w-72 tw-hidden sm:tw-block" href="/">
      <img class="tw-w-full tw-h-full tw-object-contain" src="@/assets/nav-logo.png">
    </a>
    <div class="tw-flex-1 tw-w-0 tw-h-full">
      <div class="tw-flex tw-justify-center tw-items-center tw-h-full">
        <div
          v-for="(link, index) in links"
          :key="index"
          class="tw-mr-1 tw-px-2"
          @click="handleLink(link)">
          <div class="link tw-text-b-secondary tw-text-2xl tw-font-bold tw-cursor-pointer">
            {{ link.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="nav__right tw-w-0 sm:tw-w-60" />
  </div>
</template>

<script setup>
import jump from 'jump.js'

const links = [
  { name: 'ABOUT', label: 'ABOUT' },
  { name: 'ASSETS', label: 'ASSETS' },
  { name: 'ROADMAP', label: 'ROADMAP' },
  { name: 'TEAM', label: 'TEAM' }
]
const handleLink = (link) => {
  jump(`#${link.name}`, {
    duration: 500
  })
}
</script>

<style lang="less" scoped>
  .nav {
    height: 70px;
    line-height: 70px;
    background-color: #08323e;
    .link {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        left: 10%;
        bottom: -8px;
        width: 80%;
        height: 3px;
        background-color: transparent;
        transition: all .2s ease-in-out;
        opacity: 0;
      }
      &:hover {
        &:before {
          @apply tw-bg-b-secondary;
          opacity: 1;
        }
      }
    }
  }
</style>